<template>
  <div class="p-16 rd-4 b-1 b-dashed b-gray mb-8">
    <div class="flex items-center justify-between">
      <span>{{ label }}</span>
      <el-button type="text" icon="el-icon-plus" @click="handleAdd"></el-button>
    </div>
    <el-card
      v-for="(d, i) in data"
      :key="i"
      :class="[boxClass, 'm-4 p-4 box-border']"
    >
      <div
        v-for="(col, j) in column"
        :key="i + j + col.prop"
        :class="[columnClass, '']"
      >
        <form-item
          v-if="/^el-/.test(col.name || 'el-input')"
          v-bind="col"
          v-model="d[col.prop]"
        ></form-item>
        <component
          v-else
          :is="col.name"
          v-model="d[col.prop]"
          :label="col.label"
          v-bind="col.attr || {}"
          size="mini"
          @change="() => handleChange(col, d)"
        ></component>
        <template v-if="col.extColumn && col.extColumn[d[col.prop]]">
          <template v-for="ic in col.extColumn[d[col.prop]]">
            <form-item
              :key="col.prop + ic.prop"
              v-if="/^el-/.test(ic.name || 'el-input')"
              v-bind="ic"
              v-model="d[ic.prop]"
            ></form-item>
            <component
              :key="col.prop + ic.prop"
              v-else
              :is="ic.name"
              v-model="d[ic.prop]"
              :label="ic.label"
              :prop="ic.prop"
              v-bind="ic.attr || {}"
              size="mini"
              @change="() => handleChange(ic, d)"
            ></component>
          </template>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import {} from "vue";
export default {
  props: [
    "prop",
    "label",
    "column",
    "attr",
    "value",
    "boxClass",
    "columnClass",
    "extColumn",
  ],
  data: () => ({
    data: [],
  }),
  computed: {
    datavColumn() {
      return [
        {
          label: "名称",
          prop: "name",
          atrr: { placeholder: "只有 datav 组件才需要输入名称" },
        },
        {
          label: "属性配置",
          prop: "attr",
          attr: { type: "textarea" },
        },
        { label: "文本配置", prop: "text" },
      ];
    },
    chartColumn() {
      return [
        { label: "名称", prop: "name", value: "echart" },
        { label: "选项", prop: "option", attr: { type: "textarea" } },
      ];
    },
    homeChart() {
      return [
        {
          label: "图形设置",
          prop: "colors",
          name: "form-set",
          attr: {
            column: [
              { label: "x", prop: "x", name: "number-range" },
              { label: "y", prop: "y", name: "number-range" },
              { label: "z", prop: "z", name: "el-input-number" },
              { label: "c", prop: "c", name: "el-color-picker" },
            ],
          },
        },
        {
          label: "图片(base64编码)",
          prop: "imgurl",
          key: "content.imgurl",
          attr: { type: "textarea" },
        },
        { label: "选项", prop: "option", attr: { type: "textarea" } },
      ];
    },
    modelColumn() {
      return [
        { label: "名称", prop: "name" },
        { label: "描述", prop: "desc" },
        { label: "选项", prop: "attr", attr: { type: "textarea" } },
      ];
    },
    layoutColumn() {
      return;
    },
    typeColumn() {
      const cs = this.extColumn || [];
      return {
        datav: [...this.datavColumn],
        echart: [...this.chartColumn],
        homechart: [...this.homeChart],
        model: [...this.modelColumn],
        ...cs,
      };
    },
  },
  methods: {
    initData() {
      const cs = this.column;
      let flag = false;
      const td = {};
      for (col of cs) {
        const { prop, value } = col;
        if (value != undefined) {
          td[prop] = value;
          flag = true;
        }
      }
      if (flag) {
        this.data = [{ ...td }];
      }
    },
    handleAdd() {
      this.data = [...this.data, {}];
    },
    handleChange(col, d) {
      const p = col.prop;
      const v = d[p];
      if (p) {
        this.$emit(`change-${p}`, v);
      }
    },
  },
  created() {
    const t = this.value || [];
    this.data = [...t];
  },
  watch: {
    value(v) {
      if (v != this.data) {
        const t = v || [];
        this.data = [...t];
      }
    },
    data: {
      handler(v) {
        this.$emit("input", v);
      },
      deep: true,
    },
  },
};
</script>
